<template>
  <div class="cate">
    <el-breadcrumb v-if="isSearch" class="nav" separator=">" style="margin-bottom: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">图书</el-breadcrumb-item>
      <el-breadcrumb-item  v-if="navItem[0].name">{{ navItem[0].name }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="navItem[1].name">{{ navItem[1].name }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="navItem[2].name">{{ navItem[2].name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="top" v-if="isSearch">
      <div class="demo-collapse">
        <el-collapse v-model="activeNames" v-if="navItem[0].cateLists">
          <el-collapse-item v-if="navItem[cateLayer].cateLists.length" name="1" :disabled="navItem[cateLayer].cateLists.length <= 12">
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">分类</span>
              <el-space wrap="false" :size="0">
                <el-link
                  :class="{ linkActice: activeCateItem === i.id }"
                  style="width: 80px; white-space: nowrap; font-size: 12px; text-overflow: ellipsis; overflow: hidden; margin-right: 10px"
                  v-for="i in navItem[cateLayer].cateLists.slice(0, 12)"
                  :key="i.id"
                  :underline="false"
                  @click="stopProp($event, i)"
                  >{{ i.name }}</el-link
                >
              </el-space>
            </template>
            <el-space style="margin-top: 20px" wrap="false" :size="0">
              <el-link
                style="width: 90px; margin-bottom: 8px; white-space: nowrap; font-size: 12px"
                v-for="i in navItem[cateLayer].cateLists.slice(12)"
                :class="{ linkActice: activeCateItem === i.id }"
                :key="i.id"
                :underline="false"
                @click="stopProp($event, i.id)"
                >{{ i.name }}</el-link
              >
            </el-space>
          </el-collapse-item>
          <el-collapse-item name="2" :disabled="publishingHouseList.length <= 8" v-if="publishingHouseList">
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">出版社</span>
              <el-space wrap="false" :size="0">
                <el-link
                  style="width: 120px; white-space: nowrap; font-size: 12px"
                  v-for="(m, mindex) in publishingHouseList.slice(0, 8)"
                  :key="mindex"
                  :class="{ linkActice: publishingHouseItem === m }"
                  :underline="false"
                  @click="stopPropHouse($event, m)"
                  >{{ m }}</el-link
                >
              </el-space>
            </template>
            <el-space style="margin-top: 20px" wrap="false" :size="0">
              <el-link
                style="width: 120px; margin-bottom: 8px; white-space: nowrap; font-size: 12px"
                v-for="(m, mindex) in publishingHouseList.slice(8)"
                :key="mindex"
                :underline="false"
                @click="stopPropHouse($event, m)"
                >{{ m }}</el-link
              >
            </el-space>
          </el-collapse-item>
          <el-collapse-item name="3" disabled>
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">包装</span>
              <el-space wrap="false" :size="0">
                <el-link style="width: 120px; white-space: nowrap" :class="{ linkActice: packItem === i }" :underline="false" v-for="(i, index) in packLists" :key="index" @click="pack($event, i)">{{
                  i
                }}</el-link>
              </el-space>
            </template>
          </el-collapse-item>
          <el-collapse-item name="4" disabled>
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">价格</span>
              <el-space wrap="false" :size="0">
                <el-link
                  v-for="(i, index) in priceLists"
                  :class="{ linkActice: priceItem === index }"
                  :key="index"
                  :underline="false"
                  style="width: 120px; white-space: nowrap"
                  @click="priceArea($event, index)"
                  >{{ i }}</el-link
                >
              </el-space>
            </template>
          </el-collapse-item>
          <el-collapse-item name="5" :disabled="publishDateList.length <= 8">
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">出版日期</span>
              <el-space wrap="false" :size="0">
                <el-link
                  v-for="(i, index) in publishDateList.slice(0, 8)"
                  :key="index"
                  :class="{ linkActice: publishDateItem === i }"
                  :underline="false"
                  style="width: 120px; white-space: nowrap"
                  @click="dateHandle($event, i)"
                  >{{ i }}</el-link
                >
              </el-space>
            </template>
            <el-space style="margin-top: 20px" wrap="false" :size="0">
              <el-link
                style="width: 120px; margin-bottom: 8px; white-space: nowrap"
                v-for="(i, index) in publishDateList.slice(8)"
                :key="index"
                :class="{ linkActice: publishDateItem === i }"
                :underline="false"
                @click="dateHandle($event, i)"
                >{{ i }}</el-link
              >
            </el-space>
          </el-collapse-item>
          <el-collapse-item name="6" disabled>
            <template #title>
              <span style="width: 71px; height: 35px; background: #fef8f5; text-align: center; line-height: 35px; margin-right: 10px">折扣</span>
              <el-space wrap="false" :size="0">
                <el-link
                  style="width: 120px; white-space: nowrap"
                  :underline="false"
                  v-for="(i, index) in discountLists"
                  :key="index"
                  :class="{ linkActice: discountItem === i }"
                  @click="discount($event, i, index)"
                  >{{ i }}</el-link
                >
              </el-space>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="bott_cate">
        <el-button type="warning" @click="topReset">重置</el-button>
        <el-button type="danger" @click="topSub">确认</el-button>
      </div>
    </div>

    <div class="main_top" :size="10">
      <span @click="sorts(0)" :class="{ sortActive: sort === 0 }">综合排序</span>
      <span :class="{ sortActive: sort === 1 }" @click="sorts(1)">热度<el-icon class="iconfont icon-xiangxia4"></el-icon> </span>
      <span @click="sorts(2)" :class="{ sortActive: sort === 2 }">出版时间<el-icon class="iconfont icon-xiangxia4"></el-icon> </span>
      <span @click="sorts(3)" :class="{ sortActive: sort === 3 }"
        >价格<el-icon
          :style="{ transform: topBott === 1 ? 'rotateX(180deg)' : '', position: topBott === 1 ? 'relative' : '', top: topBott === 1 ? '-2px' : '' }"
          class="iconfont icon-xiangxia4 jiage"
        ></el-icon>
      </span>
      <el-space :size="8">
        <el-input-number v-model="price1" :min="0" size="small" controls-position="right" />
        <span class="line"></span>
        <el-input-number v-model="price2" :min="0" size="small" controls-position="right" />
        <el-button type="danger" size="small" :disabled="!(price2 !== 0 && price1 < price2)" round @click="sub">确认</el-button>
        <el-button type="defult" size="small" round @click="reset">取消</el-button>
      </el-space>
    </div>
    <!-- 商品展示 -->
    <div class="cate_goods">
      <el-row :gutter="20" v-for="i in goodsList" :key="i.id">
        <div class="cata_img">
          <el-space alignment="center" :fill="true" class="sp_img" @click="toDetail(i.id)">
            <el-image :src="i.image" :fit="fill" />
          </el-space>
        </div>
        <div class="item_right">
          <el-space direction="vertical" class="sp_all" :fill="true" :size="15">
            <el-space :wrap="false" class="sp_1">
              <el-link @click="toDetail(i.id)" type="danger">{{ i.storeName }}</el-link>
            </el-space>
            <el-space :wrap="false" class="sp_2">
              <span class="xj">¥{{ i.vipPrice }}</span>
              <span class="dj">
                <span style="margin-right: 6px">定价: </span><span style="text-decoration: line-through">¥{{ i.price }}</span>
              </span>
              <span style="color: #969696; font-size: 12px" class="zhekou">({{ i.discount * 10 }}折)</span>
            </el-space>
            <el-space :wrap="false" spacer="/" :size="2">
              <el-link type="primary">{{ i.translator }}</el-link>
              <el-link type="default">{{ i.publishDate }}</el-link>
              <el-link type="primary">{{ i.publishingHouse }}</el-link>
            </el-space>
            <el-space class="jianjie" alignment="top">{{ i.storeName }} </el-space>
            <el-space>
              <el-button type="danger" @click="toCart(i.id)">加入书包</el-button>
              <el-button type="danger" plain @click="collection(i.id)">收藏</el-button>
            </el-space>
          </el-space>
        </div>
      </el-row>
    </div>

    <!-- 页脚 -->
    <el-row justify="center" style="margin-top: 40px">
      <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import { ArrowDown, Search } from '@element-plus/icons-vue'
// import Nav from '@/components/nav.vue'
// import qs from 'qs'
export default {
  name: 'cate',
  components: {
    ArrowDown,
    Search,
    // Nav,
  },
  data() {
    return {
      activeNames: 1,
      price1: 0,
      price2: 0,
      // 商品列表
      goodsList: [],
      // 总数据
      total: 0,
      page: 1,
      pageSize: 100,
      navItem: [
        { name: '', id: 0, flog: 0, cateLists: [] },
        { name: '', id: 0, flog: 0, cateLists: [] },
        { name: '', id: 0, flog: 0, cateLists: [] },
      ],
      cateLayer: 0,
      // 活跃的分类
      activeCateItem: null,

      publishDateList: [],
      publishDateItem: null,
      publishingHouseList: [],
      publishingHouseItem: null,
      priceLists: ['0-9', '9-19', '19-29', '29-49', '49-69', '69-99', '99以上'],
      priceItem: null,
      packLists: ['精装', '平装'],
      packItem: null,
      discountLists: ['2折以下', '3折', '3-5折', '5-7折', '7折以上'],
      discountItem: null,

      // 请求参数
      queryInfo: {
        // cid: 0,
        limit: 100,
        page: 1,
      },
      sort: 0,
      isSearch: true,
      styleObject: {
        transform: 'rotateX(180deg)',
        position: 'relative',
        top: '-2px',
      },
      topBott: 0,
      copyId: '',
    }
  },
  created() {
    if (this.$route.query.keyword) {
      this.queryInfo.keyword = this.$route.query.keyword
      this.isSearch = false
    } else {
      this.queryInfo.cid = this.$route.query.id
      const pathArr = this.$route.query.path.split('/')
      // 获取分类列表
      this.$http
        .get('category')
        .then((res) => {
          console.log(res.data.data)
          if (pathArr.length === 3) {
            console.log('一级分类')
            this.cateLayer = 0
            res.data.data.forEach((item, index) => {
              if (item.id === +this.$route.query.id) {
                this.navItem[0].name = item.name
                this.navItem[0].flog = index
                this.navItem[0].id = item.id
                this.navItem[0].cateLists = item.child
              }
            })
            console.log(this.navItem[0], this.cateLayer)
          } else if (pathArr.length === 4) {
            console.log('二级分类')

            res.data.data.forEach((item, index) => {
              if (item.id === +pathArr[2]) {
                this.navItem[0].name = item.name
                this.navItem[0].flog = index
                this.navItem[0].id = item.id
                this.navItem[0].cateLists = item.child
              }
            })

            res.data.data[this.navItem[0].flog].child.forEach((item, index) => {
              if (item.id === +this.$route.query.id) {
                this.navItem[1].name = item.name
                this.navItem[1].flog = index
                this.navItem[1].id = item.id
                if (item.child) {
                  this.navItem[1].cateLists = item.child
                } else {
                  this.navItem[1].cateLists = []
                }
              }
            })
            this.cateLayer = 1
          } else if (pathArr.length === 5) {
            console.log('三级分类')

            res.data.data.forEach((item, index) => {
              if (item.id === +pathArr[2]) {
                this.navItem[0].name = item.name
                this.navItem[0].flog = index
                this.navItem[0].id = item.id
                this.navItem[0].cateLists = item.child
              }
            })

            res.data.data[this.navItem[0].flog].child.forEach((item, index) => {
              if (item.id === +pathArr[3]) {
                this.navItem[1].name = item.name
                this.navItem[1].flog = index
                this.navItem[1].id = item.id
                if (item.child) {
                  this.navItem[1].cateLists = item.child
                } else {
                  this.navItem[1].cateLists = []
                }
              }
            })

            res.data.data[this.navItem[0].flog].child[this.navItem[1].flog].child.forEach((item, index) => {
              if (item.id === +this.$route.query.id) {
                this.navItem[2].name = item.name
                this.navItem[2].flog = index
                this.navItem[2].id = item.id
                this.navItem[2].cateLists = []
              }
            })
            // this.cateLayer = 2
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    }
    this.copyId = this.$route.query.id
    this.getPressTime()
    this.getList()
  },
  watch: {
    queryInfo(e) {
      console.log(e)
      this.getList()
    },
  },
  methods: {
    /* 点击分类 */
    stopProp(e, row) {
      e.stopPropagation()
      this.activeCateItem = row.id
      this.copyId = row.id
      this.queryInfo = {
        limit: 100,
        page: 1,
        cid: row.id,
      }
      console.log(row)
      if ('child' in row) {
        if (this.navItem[1].name) {
          this.navItem[2].name = row.name
          this.navItem[this.cateLayer].cateLists = row.child
        } else {
          this.navItem[1].name = row.name
          this.navItem[this.cateLayer].cateLists = row.child
        }
      }
      // this.copyId = row.id
      this.getPressTime()
      this.getList()
    },
    /* 点击出版社 */
    stopPropHouse(e, name) {
      e.stopPropagation()
      this.queryInfo.publishingHouse = name
      this.publishingHouseItem = name
      this.getList()
    },
    /* 点击包装 */
    pack(e, name) {
      e.stopPropagation()
      this.queryInfo.bindingLayout = name
      this.packItem = name
      this.getList()
    },
    /* 点击价格区间 */
    priceArea(e, flog) {
      e.stopPropagation()
      if (flog === 0) {
        this.queryInfo.maxPrice = 9
        this.queryInfo.minPrice = 0
      } else if (flog === 1) {
        this.queryInfo.maxPrice = 19
        this.queryInfo.minPrice = 9
      } else if (flog === 2) {
        this.queryInfo.maxPrice = 29
        this.queryInfo.minPrice = 19
      } else if (flog === 3) {
        this.queryInfo.maxPrice = 49
        this.queryInfo.minPrice = 29
      } else if (flog === 4) {
        this.queryInfo.maxPrice = 69
        this.queryInfo.minPrice = 49
      } else if (flog === 5) {
        this.queryInfo.maxPrice = 99
        this.queryInfo.minPrice = 69
      } else {
        this.queryInfo.maxPrice = ''
        this.queryInfo.minPrice = 99
      }
      this.priceItem = flog
      this.getList()
    },
    /* 点击出版时间 */
    dateHandle(e, name) {
      e.stopPropagation()
      this.queryInfo.publishYear = name
      this.publishDateItem = name
      this.getList()
    },
    /* 点击折扣 */
    discount(e, name, flog) {
      e.stopPropagation()
      this.discountItem = name
      if (flog === 0) {
        this.queryInfo.discount = 0.2
        this.queryInfo.discountSymbol = 4
        this.queryInfo.discountTwo = 0.2
        this.queryInfo.discountSymbolTwo = 4
      } else if (flog === 1) {
        this.queryInfo.discount = 0.3
        this.queryInfo.discountSymbol = 3
        this.queryInfo.discountTwo = 0.3
        this.queryInfo.discountSymbolTwo = 3
      } else if (flog === 2) {
        this.queryInfo.discount = 0.3
        this.queryInfo.discountSymbol = 2
        this.queryInfo.discountTwo = 0.5
        this.queryInfo.discountSymbolTwo = 4
      } else if (flog === 3) {
        this.queryInfo.discount = 0.5
        this.queryInfo.discountSymbol = 2
        this.queryInfo.discountTwo = 0.7
        this.queryInfo.discountSymbolTwo = 4
      } else if (flog === 4) {
        this.queryInfo.discount = 0.7
        this.queryInfo.discountSymbol = 2
        this.queryInfo.discountTwo = 0.7
        this.queryInfo.discountSymbolTwo = 2
      }
      this.getList()
    },
    /* 切换页码 */
    handleCurrentChange(e) {
      this.queryInfo.page = e
      this.getList()
    },
    toDetail(id) {
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: { id },
      })
      window.open(routeUrl.href, '_blank')
    },
    // 获取列表
    getList() {
      this.$http
        .get('searchProductList', {
          params: this.queryInfo,
        })
        .then((res) => {
          this.total = res.data.data.total
          this.goodsList = res.data.data.list
          console.log(this.goodsList)
          this.sort = 0
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    // 加购
    toCart(id) {
      if (!window.sessionStorage.getItem('token')) return this.$message.warning('请先登录')
      this.$http
        .get('product/detail/' + id)
        .then((res) => {
          if (res.data.code === 200) {
            const attrId = res.data.data.productAttr[0].id
            this.$http
              .post('cart/save', { cartNum: 1, productId: id, productAttrUnique: attrId })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('加入书包成功')
                  this.$http
                    .get('cart/count', {
                      params: {
                        numType: true,
                        type: 'total',
                      },
                    })
                    .then((res) => {
                      if (res.data.code === 200) {
                        console.log(res.data.data)
                        this.setSessionItem('cartNum', res.data.data.count)
                      } else {
                        this.$message.error(res.data.message)
                      }
                    })
                    .catch((e) => {
                      this.$message.error(e.message)
                    })
                } else {
                  this.$message.error(res.data.message)
                }
              })
              .catch((e) => {
                this.$message.error(e.message)
              })
          }
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    // 获取出版社
    getPressTime() {
      this.$http
        .get('getPublishList', {
          params: {
            cid: this.copyId,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.publishDateList = res.data.data.publishDateList
            this.publishingHouseList = res.data.data.publishingHouseList
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    // 排序
    sorts(flog) {
      if (flog === 0) {
        // 默认排序
        this.getList()
      } else if (flog === 1) {
        // 热度排序
        this.sort = 1
        this.goodsList.sort(function (a, b) {
          return b.sales - a.sales
        })
      } else if (flog === 2) {
        // 时间排序
        this.sort = 2
        let regex = /\d+/g
        this.goodsList.map((d) => {
          if (d.publishDate) {
            d.dateSort = d.publishDate.match(regex).join('')
            return d
          }
        })
        this.goodsList.sort(function (a, b) {
          return b.dateSort - a.dateSort
        })
      } else if (flog === 3) {
        // 价格排序
        this.sort = 3
        if (this.topBott === 0) {
          this.topBott += 1
          this.goodsList.sort(function (a, b) {
            return a.vipPrice - b.vipPrice
          })
        } else {
          this.topBott = 0
          this.goodsList.sort(function (a, b) {
            return b.vipPrice - a.vipPrice
          })
        }
      }
    },
    /* 价格区间 */
    reset() {
      this.price1 = 0
      this.price2 = 0
      delete this.queryInfo.maxPrice
      delete this.queryInfo.minPrice
      this.getList()
    },
    sub() {
      this.queryInfo.minPrice = this.price1
      this.queryInfo.maxPrice = this.price2
      this.getList()
    },
    /* 商品收藏 */
    collection(id) {
      if (!window.sessionStorage.getItem('token')) return this.$message.warning('请先登录')
      this.$http
        .post('collect/add', {
          category: 'store',
          id,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('收藏成功')
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 重置 */
    topReset() {
      this.publishDateItem = null
      this.publishingHouseItem = null
      this.priceItem = null
      this.packItem = null
      this.discountItem = null
      this.queryInfo = {
        limit: 100,
        page: 1,
        cid: this.copyId,
      }

      this.getList()
      this.getPressTime()
    },
    /* 确认 */
    topSub() {
      this.getList()
      this.getPressTime()
    },
  },
}
</script>

<style scoped lang="scss">
.cate {
  @include margin(1200px);
  .top {
    margin-bottom: 30px;
    .nav {
      margin-bottom: 20px;
    }
  }
  .main_top {
    height: 30px;
    border: solid 1px #efefef;
    box-sizing: border-box;
    background-color: #f5f5f5;
    width: 100%;
    box-shadow: 0 30px 0px #ec7759;
    margin-bottom: 54px;
    display: flex;
    align-items: center;
    > span {
      font-size: 12px;
      display: block;
      height: 100%;
      padding: 0 10px;
      line-height: 28px;
      cursor: pointer;
      &:hover {
        color: #fd5115;
        background-color: #e6e6e6;
      }
    }
    .item_main_top {
      padding: 0 10px;
    }
    .line {
      width: 6px;
      height: 1px;
      background: #b5b5b591;
    }
  }
  .cate_goods {
    width: 100%;
    .el-row {
      height: 242px;
      width: 100%;
      padding: 21px 0 21px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      box-sizing: border-box;
      &:hover {
        background: #f8f8f8;
      }
      .cata_img {
        width: 240px;
        height: 100%;
        box-sizing: border-box;
        .sp_img {
          height: 100%;
          width: 200px;
          cursor: pointer;
          .el-image {
            height: 200px;
            width: 200px;
          }
        }
      }
      .item_right {
        width: 920px;
        height: 100%;
        box-sizing: border-box;
        .sp_all {
          .sp_1 {
            .el-link {
              font-size: 14px;
              font-family: simsun;
            }
          }
          .sp_2 {
            .xj {
              font-size: 18px;
              color: #ff2832;
              font-family: arial, 'Hiragino Sans GB', 'Simsun';
              font-weight: bold;
            }
            .dj {
              color: #969696;
              font-size: 12px;
              font-weight: normal;
              font-family: arial, 'Hiragino Sans GB', 'Simsun';
            }
          }
          .jianjie {
            height: 40px;
            overflow: hidden;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
  }
}

.bott_cate {
  width: 120px;
  margin: 10px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.el-link :deep(.el-link__inner) {
  width: 100%;
  justify-content: flex-start;
}

.istop_bot {
  transform: rotateX(180deg);
  position: relative;
  top: -2px;
}

// style=""

.linkActice {
  color: #fb0707 !important;
}
.sortActive {
  color: #fd5115;
  background-color: #e6e6e6;
}
:deep(.el-collapse-item__header) {
  height: 35px;
  width: 100%;
  border-bottom: 1px dotted #eeeceb;
}
:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
  color: #000 !important;
}
</style>
